<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>手风琴.html</title>
    <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .list {
            list-style: none;
            cursor: pointer;
        }

        .list > li {
            width: 100px;
            text-align: center;
            border: 1px solid lightgrey;
        }

        .list .content {
            background-color: aquamarine;
            width: 100%;
            height: 200px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list">
        <li>
            <span>标题1</span>
            <div class="content">这是内容</div>
        </li>
        <li>
            <span>标题2</span>
            <div class="content">这是内容</div>
        </li>
        <li>
            <span>标题3</span>
            <div class="content">这是内容</div>
        </li>
        <li>
            <span>标题4</span>
            <div class="content">这是内容</div>
        </li>
        <li>
            <span>标题5</span>
            <div class="content">这是内容</div>
        </li>
    </ul>
</div>
</body>
<script >
    $(function (){
        $('.list>li').click(function (){
            console.log($(this).children('.content').css('display'))
            if ($(this).children('.content').css('display') != 'block'){
                $(this).children('.content').show().parent().siblings('li').children('.content').hide()
            } else {
                $(this).children('.content').hide()
            }
        })
    })
</script>
</html>